import {Component, OnInit, Input, Output, QueryList,ViewChild, ViewChildren, EventEmitter, ElementRef} from '@angular/core';
import {numeral} from 'numeral';
import {Util} from "../../../../common/util";
import {environment} from "environments/environment";

@Component({
  selector: 'transfer-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

  public $ = window['$'];

  // 选中行数组
  public selectedDatas: Array<any> = [];

  /**
   * 表格数据
   * @type {Data}
   * @memberof ListComponent
   */
  @Input()
  public data: Data = {
    list: []
  };

  @Input()
  public status;

  @Input()
  public hkType;

  @Input()
  public bizType;
  
  /**
   * 输出属性，往上派发当前点击行的数据。
   */
  @Output()
  public sendData: EventEmitter<any> = new EventEmitter<any>();

  @ViewChild('selectAll')
  public selectAllBtn: ElementRef;

  @ViewChildren('select')
  public selectBtns: QueryList<ElementRef> = new QueryList<ElementRef>();

  constructor() {
  }

  ngOnInit() {

  }

  /**
   * 选择全部行
   */
  public selectAll() {
    this.selectAllBtn.nativeElement.checked = true;
    this.selectBtns.forEach((btn) => {
      btn.nativeElement.checked = true;
    });
    this.addAllSelectedDatas();
  }

  /**
   * 取消选择全部行
   */
  public unSelectAll() {
    this.selectAllBtn.nativeElement.checked = false;
    this.selectBtns.forEach((btn) => {
      btn.nativeElement.checked = false;
    });
    this.resetSelectedDatas();
  }

  /**
   * 切换全部行的选择状态
   */
  public toggleSelectAll() {
    if (this.selectAllBtn.nativeElement.checked) {
      this.selectAll();
    } else {
      this.unSelectAll();
    }
  }

  /**
   * 根据当前点击目标DOM元素返回列表行索引
   */
  public selectOne($event, index) {
    const $target = $event.target;
    const checkStatus = $target.checked;
    if (!this.isAllSelect()){
      this.selectAllBtn.nativeElement.checked = false;
    } else {
      this.selectAllBtn.nativeElement.checked = true;
    }
    this.autoAddSelectedDatas();
  }

  /**
   * 判断是否列表所有行都处于已被选中的状态，返回true表示列表行都选中了，false则表示列表行中存在
   * 未被选中的行
   * @returns {boolean}
   */
  public isAllSelect(): boolean {
    const result = this.selectBtns.some((btn, index) => {
      return btn.nativeElement.checked === false;
    });
    return !result;
  }

  /**
   * 重置被选中的行对应的数据数组为空数组
   */
  public resetSelectedDatas() {
    this.selectedDatas = [];
  }

  /**
   * 将selectBtns数组代表的已被选中的行对应的数据添加到selectedDatas数组中
   */
  public addAllSelectedDatas() {
    this.resetSelectedDatas();
    this.selectBtns.forEach((btn, index) => this.selectedDatas.push(this.data.list[index]));
  }

  /**
   * 将所有已被选中的行对应的数据添加到selectedDatas数组中
   * @returns {Array<any>}
   */
  public autoAddSelectedDatas(): Array<any> {
    this.resetSelectedDatas();
    this.selectBtns.forEach((btn, index) => {
      if (btn.nativeElement.checked) {
        this.selectedDatas.push(this.data.list[index]);
      }
    });
    return this.selectedDatas;
  }

  /**
   * 获取所有被选中的明细行对应的数据数组
   * @returns {Array<any>}
   */
  public getSelectedDatas(): Array<any> {
    return this.selectedDatas;
  }
  
  /**
   * 点击列表行时触发的动作
   * @param {any} row
   * @param {any} item
   * @memberof ListComponent
   */
  public openModal(row, item) {
    this.sendDataAction(item);
    this.$("#transferDetailModal").modal({
      keyboard: false,
      backdrop: false
    });
  }

  /**
   * 列表往父组件发送数据动作
   * @param {*} item
   * @memberof ListComponent
   */
  public sendDataAction(item: any) {
    this.sendData.emit({
      item: Object.assign({}, item)
    });
  }
}
interface Data {
  [propName: string]: any;
  list: Array<any>;
}
